<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <formTitle title="基本信息" />
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  alarmHiddenDangerDetail,
  alarmHiddenDangerUpdate,
  alarmHiddenDangerAdd
} from '@/api/alarm/danger'
import VForm from "@/components/VForm/index";
import formTitle from "@/components/FormTitle/formTitle.vue";

export default {
  components: {
    VForm,formTitle
  },
  props: {
    width: {
      type: String,
      default: "70%",
    },
    title: {
      type: String,
      default: "详情",
    },
    id: {},
    openType: {
      type: String,
      default: "add"
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'width': {
      handler(newVal, oldVal) {
        console.log('newVal===', newVal, oldVal)
        let w = this.width.split('%')[0]
        if (w >= 60) {
          this.rowspan = 2
        } else {
          this.rowspan = 1
        }
      },
      deep: true,
      immediate: true
    },
    'modeTypeOptions': {
      handler(newVal, oldVal) {
        this.formData.options.forEach(t => {
          if (t.key == 'modeType') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
    'typeOptions': {
      handler(newVal, oldVal) {
        this.formData.options.forEach(t => {
          if (t.key == 'type') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
    'statusOptions': {
      handler(newVal, oldVal) {
        this.formData.options.forEach(t => {
          if (t.key == 'status') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
    'sourceOptions': {
      handler(newVal, oldVal) {
        this.formData.options.forEach(t => {
          if (t.key == 'source') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
    'levelOptions': {
      handler(newVal, oldVal) {
        this.formData.options.forEach(t => {
          if (t.key == 'level') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
      }
    }
  },
  data() {
    return {
      rowspan: 1,
      dict: {},
      formData: {
        form: {
          modeType: "ALARM_DLL",
          identificationCode: "",
          type: "",
          status: "",
          name: "",
          level: "",
          source: "",
          findTime: "",
          unitName: "",
          reportName: "",
          linkPhone: "",
          dutyUnit: "",
          dutyName: "",
          dutyPhone: "",
          address: "",
          triggerElem: "",
          imageFile: [],
          collapseLength: "",
          collapseWidth: "",
          collapseHeight: "",
          collapseAcreage: "",
          collapseVolume: "",
          disposalProcess: "",
          disposalUnit: "",
          disposalPeople: "",
          disposalTime: "",
          disposalPhone: "",
          disposalFile: [],
          provinceCode: "",
          cityCode: "",
          countyCode: "",
          areaCode: "",
          updateBy: "",
          updateTime: "",

          selectAreaCode: []
        },
        options: [
          {
            title: "标识码",
            key: "identificationCode",
            type: "text",
          },
          {
            title: "状态",
            key: "status",
            type: "select",
            option: {
              data: this.statusOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
          {
            title: "隐患名称",
            key: "name",
            type: "text",
          },
          {
            title: "隐患等级",
            key: "level",
            type: "select",
            option: {
              data: this.levelOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
          {
            title: "隐患来源",
            key: "source",
            type: "select",
            option: {
              data: this.sourceOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
          {
            title: "发现时间",
            key: "findTime",
            type: "datetime",
          },
          {
            title: "上报单位",
            key: "unitName",
            type: "text",
          },
          {
            title: "上报人员",
            key: "reportName",
            type: "text",
          },
          {
            title: "人员联系方式",
            key: "linkPhone",
            type: "text",
          },
          {
            title: "责任单位",
            key: "dutyUnit",
            type: "text",
          },
          {
            title: "责任人",
            key: "dutyName",
            type: "text",
          },
          {
            title: "责任人联系方式",
            key: "dutyPhone",
            type: "text",
          },
          {
            title: "区域",
            key: "selectAreaCode",
            type: "gdAreaSelect",
            changeFn: this.searchAreacodeHandle, //如需对区域数据做更多的处理，可在这里定义方法
          },
          {
            title: "隐患地址",
            key: "address",
            type: "text",
          },
          {
            title: "引发因素",
            key: "triggerElem",
            type: "text",
          },
          {
            title: "坍塌长度",
            key: "collapseLength",
            type: "text",
          },
          {
            title: "坍塌宽度",
            key: "collapseWidth",
            type: "text",
          },
          {
            title: "坍塌高度",
            key: "collapseHeight",
            type: "text",
          },
          {
            title: "坍塌面积",
            key: "collapseAcreage",
            type: "text",
          },
          {
            title: "坍塌体积",
            key: "collapseVolume",
            type: "text",
          },
          {
            title: "现场照片",
            key: "imageFile",
            type: "file",
            fileType: "file",
            listType: "text",
            uploadTextTip: "",
            columnWidth: 'w100',
          },
          {
            title: "处置过程",
            key: "disposalProcess",
            type: "textarea",
            columnWidth: 'w100',
          },
          {
            title: "处置单位",
            key: "disposalUnit",
            type: "text",
          },
          {
            title: "处置负责人",
            key: "disposalPeople",
            type: "text",
          },
          {
            title: "处置完成时间",
            key: "disposalTime",
            type: "datetime",
          },
          {
            title: "处置负责人联系方式",
            key: "disposalPhone",
            type: "text",
          },
          {
            title: "处置照片",
            key: "disposalFile",
            type: "file",
            fileType: "file",
            listType: "text",
            uploadTextTip: "",
            columnWidth: 'w100',
          },
        ],
        rules: {
          identificationCode: [
            {required: true, message: '请输入', trigger: 'blur'},
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          status: [{required: true, message: '请选择', trigger: 'change'}],
          name: [
            {required: true, message: '请输入', trigger: 'blur'},
            {max: 64, message: '长度最大为64个字符', trigger: 'blur'}
          ],
          level: [
            {required: true, message: '请输入', trigger: 'change'},
          ],
          source: [
            {required: true, message: '请输入', trigger: 'change'},
          ],
          findTime: [{required: true, message: '请输入', trigger: 'blur'},],
          unitName: [
            {max: 100, message: '长度最大为100个字符', trigger: 'blur'}
          ],
          reportName: [
            {max: 40, message: '长度最大为40个字符', trigger: 'blur'}
          ],
          linkPhone: [
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          dutyUnit: [
            {max: 100, message: '长度最大为100个字符', trigger: 'blur'}
          ],
          dutyName: [
            {max: 40, message: '长度最大为40个字符', trigger: 'blur'}
          ],
          dutyPhone: [
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          address: [
            {max: 200, message: '长度最大为200个字符', trigger: 'blur'}
          ],
          triggerElem: [
            {max: 100, message: '长度最大为100个字符', trigger: 'blur'}
          ],
          imageFile: [],
          collapseLength: [],
          collapseWidth: [],
          collapseHeight: [],
          collapseAcreage: [],
          collapseVolume: [],
          disposalProcess: [
            {max: 500, message: '长度最大为500个字符', trigger: 'blur'}
          ],
          disposalUnit: [
            {max: 200, message: '长度最大为200个字符', trigger: 'blur'}
          ],
          disposalPeople: [
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          disposalTime: [],
          disposalPhone: [
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          disposalFile: [],
          provinceCode: [
            {max: 12, message: '长度最大为12个字符', trigger: 'blur'}
          ],
          cityCode: [
            {max: 12, message: '长度最大为12个字符', trigger: 'blur'}
          ],
          countyCode: [
            {max: 12, message: '长度最大为12个字符', trigger: 'blur'}
          ],
          areaCode: [
            {max: 36, message: '长度最大为36个字符', trigger: 'blur'}
          ],
          updateBy: [
            {max: 36, message: '长度最大为36个字符', trigger: 'blur'}
          ],
          updateTime: [],
        },
        labelWidth: "160px",
      },
      // 字典
      modeTypeOptions: [],
      typeOptions: [],
      statusOptions: [],
      sourceOptions: [],
      levelOptions: [],
    };
  },
  methods: {
    searchAreacodeHandle(arr) {
      //console.log(arr)
      this.formData.form.provinceCode = arr[0]
      this.formData.form.cityCode = arr[1]
      this.formData.form.countyCode = arr[2]
    },
    submitFormat() {
      this.formData.form.imageFile = JSON.stringify(this.formData.form.imageFile)
      this.formData.form.disposalFile = JSON.stringify(this.formData.form.disposalFile)
    },
    loadFormat() {
      this.formData.form.imageFile = this.formData.form.imageFile ? JSON.parse(this.formData.form.imageFile) : []
      this.formData.form.disposalFile = this.formData.form.disposalFile ? JSON.parse(this.formData.form.disposalFile) : []
    },
    getCheckBoxData(value, option, type) {
      if (type == "submit") {
        if (value.length == 0) {
          return null
        }
        let temp = [];
        value.forEach(t => {
          let item = option.find(x => x.label == t)
          if (item != undefined) {
            temp.push(item.value)
          }
        })
        return temp.join(",")
      } else {
        if (!value) {
          return []
        } else {
          let data = value.split(",")
          let temp = []
          data.forEach(t => {
            let item = option.find(x => x.value == t)
            if (item != undefined) {
              temp.push(item.label)
            }
          })
          return temp
        }
      }
    },
    sure() {
      console.log('sure===', this.formData.form)
      this.$refs.vformComponents.$refs.form.validate().then(res => {
        this.submitFormat()
        if (this.openType == "add") {
          this.add()
        } else {
          this.update()
        }
      })
    },
    add() {
      this.formData.form.id = null
      alarmHiddenDangerAdd(this.formData.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: this.$t('tips.createSuccess'),
            type: 'success'
          })
          this.closeSuccess()
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
    update() {
      alarmHiddenDangerUpdate(this.formData.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: this.$t('tips.updateSuccess'),
            type: 'success'
          })
          this.closeSuccess()
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
    cancel() {
      this.close()
    },
    handleClose(done) {
      done()
      this.close()
    },
    closeSuccess() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$emit('success')
    },
    close() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$emit('close')
    },
    getData() {
      if (this.openType != "add") {
        alarmHiddenDangerDetail(this.id).then(res => {
          if (res.code == 200) {
            this.formData.form = res.data
            this.loadFormat()
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      }
    },
  },
  created() {
    this.statusOptions = []
    this.$commonJs.filterDataDict("alarmDangeStatus", this.statusOptions)
    this.sourceOptions = []
    this.$commonJs.filterDataDict("alarmDangeSource", this.sourceOptions)
    this.levelOptions = []
    this.$commonJs.filterDataDict("alarmDangeLevel", this.levelOptions)
  }
};
</script>

<style lang="scss" scoped>

</style>
